<template>
	<view class="u-page">
		<view class="header">
			<view class="nav-bar">
			<uni-nav-bar left-icon="back"  @clickLeft="goback()"  color="#ffffff" :border="border"  statusBar="true" backgroundColor="transparent">
				 <view slot="left" class="sitename">{{titleName}}</view>
			</uni-nav-bar>
			</view>
		</view>
		<view class="content">
			<view class="postFrom"> 
				<uni-forms ref="form" class="formdata" :modelValue="formData" :rules="rules" :border="true" >
					 <uni-forms-item  class="title" label="项目名称:" label-width="100" name="title" required>
						<uni-easyinput class="input" type="text" v-model="formData.title" placeholder="请输入项目名称" :inputBorder="false" placeholderStyle="text-align:right"/>
					</uni-forms-item> 
					<uni-forms-item class="title" label="项目联系人:" label-width="100" name="projectContacts" required>
						<uni-easyinput class="input" type="text" v-model="formData.projectContacts" placeholder="请输入姓名" :inputBorder="false" placeholderStyle="text-align:right"/>
					</uni-forms-item>
					<uni-forms-item class="title" label="联系人电话:" label-width="100" name="contactsPhone" required>
						<uni-easyinput class="input" type="text" v-model="formData.contactsPhone" placeholder="请输入手机号" :inputBorder="false" placeholderStyle="text-align:right"/>
					</uni-forms-item>
					<uni-forms-item class="title" label="联系人微信号:" label-width="100"  name="contactsWx">
						<uni-easyinput class="input" type="text" v-model="formData.contactsWx" placeholder="请输入微信号" :inputBorder="false" placeholderStyle="text-align:right"/>
					</uni-forms-item>
					<uni-forms-item class="title" label="项目所在地:" label-width="100" name="projectAddress">
						<uni-easyinput class="input" type="text" v-model="formData.projectAddress" placeholder="需详细到街道门牌号" :inputBorder="false" placeholderStyle="text-align:right"/>
					</uni-forms-item>
					<uni-forms-item class="title"  name="projectInfo">
						<view class="title">
							项目介绍：
						</view>
						<view class="input">
						<uni-easyinput class="input" type="textarea" v-model="formData.projectInfo" placeholder="请输入项目介绍，以便平台审核了解…" :inputBorder="false" placeholderStyle="color:#767B8D"/>
						</view>
					</uni-forms-item>
					<uni-forms-item class="title no-border"  name="teamInfo">
						<view class="title">
							团队介绍：
						</view>
						<view class="input">
						<uni-easyinput class="input" type="textarea" v-model="formData.teamInfo" placeholder="请输入团队主要成员介绍…" :inputBorder="false" placeholderStyle="color:#767B8D"/>
						</view>
					</uni-forms-item>
					<uni-forms-item class="title no-border"  name="other">
						<view class="title">
							其它信息：
						</view>
						<view class="input">
						<uni-easyinput class="input" type="textarea" v-model="formData.other" placeholder="请输入项目相关的其它信息…" :inputBorder="false" placeholderStyle="color:#767B8D"/>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="files">
				<view class="lable">附件上传<text class="textinfo">(不超过9张)</text></view>
				<view class="lableinfo"><image src="../../../static/icon/gantan.png" mode=""></image><text>请上传项目相关附件材料</text></view>
				<view class="upfile">
					<uni-file-picker 
					    v-model="imageValue"  
					    file-mediatype="image"
					    mode="grid"
					    file-extname="png,jpg"
						auto-upload="true"
					    :limit="9"
					    @select="select"
					>
					<view class="upload-image">
						<image src="../../../static/icon/uploadicon.png" mode=""></image>
						<text>上传照片</text>
					</view>
					
					</uni-file-picker>
				</view>
			</view>
		
			
		</view>
		<view class="submit">
			 <button type="warn" @click="submit()">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleName:'发起项目',
				type:'',
				formData:{
					title:'',
					projectContacts:"",
					contactsPhone:"",
					contactsWx:"",
					projectAddress:"",
					projectInfo:'',
					teamInfo:"",
					other:"",
					files:[]
				},
				data:[],
				token:'',
				qiniuaddr: this.QiniuUrl,
				rules:{
					title: {
						rules: [{
								required: true,
								errorMessage: '请输入标题',
							},
							{
								minLength: 3,
								maxLength: 10,
								errorMessage: '标题长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					projectContacts: {
						rules: [{
								required: true,
								errorMessage: '请输入联系人姓名',
							},
							{
								minLength: 2,
								maxLength: 4,
								errorMessage: '标题长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					contactsPhone: {
						rules: [{
								required: true,
								errorMessage: '请输入联系人电话',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请正确输入手机号',
							}
						]
					},
				}
			}
		},
		onLoad(data) {
			this.type=data.type
			console.log('1--',data)
			this.QiniuToken();
			if(data.type == 1){
				
				this.titleName = "股权设立"
			}else if(data.type == 2){
				this.titleName = "股权转让"
			}
		},
		methods: {
			QiniuToken(){
				// console.log('url',this.HttpServe+'/Welcome/QiniuToken',)
				const token = uni.request({
					url: this.HttpServe+'/Welcome/QiniuToken',
					method: 'post',
					success: (res) => {
						// console.log('1-----------',res);
						this.token = res.data.data;
					}
				})
				// console.log('111111',token)
			},
			goback(){
				uni.navigateBack({
					delta: 1
				})
			},
			select(e){
				// console.log('选择文件：',e)
				
				 let data = e.tempFiles
				// data.forEach(item=>{
					this.upload(data)
				 // })
			},
			upload(imgPath){
			    let _this = this
				var time = new Date().getTime();
				imgPath.forEach(function(item,index,array){
					const filename = time+item.cloudPath;
					uni.uploadFile({
					   url: 'http://upload-z2.qiniup.com',  
					   name: 'file',
					   filePath: item.path,
					   header: {
					     "Content-Type": "multipart/form-data"
					   },
					  formData: {
					    token: _this.token, //后端返回的token
						key: filename,
					  },
					  success: function(res) {
						let key = JSON.parse(res.data).key;
					     _this.formData.files[index] = _this.qiniuaddr +"/" +key;
						 console.log('files',_this.formData.files)
					  },
					  fail: function(res) {
					     console.log(res)
					  }
					});
				 })
				 // console.log('111',_this.formData.files)
			    
			},
			
			async submit(){
				// let that = this
				await this.$refs.form.validate().then(res=>{
					res.uuid = uni.getStorageSync('userData').uid
					res.type = this.type
					this.data = res
				  	this.postFrom(res)
				}).catch(err =>{
					// console.log('表单错误信息：', err);
					uni.showToast({ title: '表单错误信息', icon: 'error', duration: 3000 });
				})
			
			
			},
				
			async postFrom(res){
				// console.log('2222222',res)
				// let res = this.data
				res.files = JSON.stringify(this.formData.files)
				console.log('1-------------',res)
				const project = await this.GQL({
					"operationName": "createSlProject",
					"query": "mutation createSlProject($input: CreateSlProjectInput!) { createSlProject(input: $input) { slProject { pid title } } }",
					"variables": {"input": {"slProject":res}}
				});
				// console.log('11111',project)
				if(project.data.createSlProject.slProject){
					uni.request({
						url: this.HttpServe+'/Api/phoneCode',
						method: 'post',
						success(res) {
							uni.showToast({ title: '提交成功', icon: 'success', duration: 3000 });
							uni.reLaunch({
								url:"/pages/index/index"
							});
						}
					})
					
				}else{
					uni.showToast({ title: '创建失败', icon: 'error', duration: 3000 });
				}
				
				
			}
			
		}
	}
</script>

<style lang="scss">
.u-page{
		background-color: #FBFCFE;
	}
	 .header{
	 	width: 100%;
	 	height: 200px;
	 	/* color: #FFFFFF; */
	 	background: linear-gradient(#C7171E, #f0f2f5); /* 标准的语法 */
	 	.nav-bar{
	 		.uni-navbar__header{
	 			padding-left:15px ;
	 		}
	 		.uni-navbar__header-btns-left{
	 			width: 150px;
	 		}
	 		.sitename{
	 			height: 50px;
	 			font-size: 16px;
	 			font-family: PingFangSC-Medium, PingFang SC;
	 			font-weight: 550;
	 			color: #FFFFFF;
	 		}
	 	}
	 }
	.content{
		position: relative;
		top: -130px;
		margin: 15px;
			
	}
	.postFrom{
		background-color: #FFFFFF;
		box-shadow: 0 20rpx 100rpx 4rpx rgba(55,58,64,0.14);
		// height: 200px;
		width: 100%;
		border-radius: 5px;
		.uni-forms{
			margin: 15px;
		}
		.label-text{
			color: #161E3E!important;
			font-size: 30rpx!important;
			font-weight: 600;
		}
		.title{
			// position: absolute;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 600;
			color: #161E3E;
			text-align: left;
			margin-bottom: 20rpx;
			&.no-border .uni-forms-item--border{
				border-top:none;
			}
		}
		.input{
			// position: relative;
			align-items: flex-end;
			text-align: right;
			font-size: 11px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #767B8D;	
			.uni-easyinput__content-textarea{
				border: 2rpx solid #D7D7D7!important;
				background-color: #F9FBFF!important;
				border-radius: 10rpx;
				padding: 20rpx 18rpx;
			}
			
			// margin-left: 30%;
		}
		.uni-form-text{
			margin: 10px;
			padding-top: 15px;
			align-items: center;
		}
		.lable{
			font-size: 15px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #161E3E;
			line-height: 16px;
		}
		.easyinput{
			margin-top: 20px;
			background: #F9FBFF;
			border-radius: 5px;
			border: 1px solid #D7D7D7;
			font-size: 11px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #767B8D;
			line-height: 12px;
		}
	}
	.files{
		height: 200px;
		background-color: #FFFFFF;
		padding: 40rpx 34rpx;
		margin-top: 20px;
		padding-bottom: 20px;
		height: 100%;
		box-shadow: 0 20rpx 100rpx 4rpx rgba(55,58,64,0.14);
		border-radius: 10rpx;
		.textinfo{
			font-size: 11px;
			color: #9BA7C1;
			line-height: 12px;
			margin-left: 16rpx;
		}
		.upfile{
			margin: 10px;
		}
		
		
		.lable{
			// padding: 20px 10px 10px 10px;
			font-size: 36rpx;
			font-weight: 500;
			color: #161E3E;
			line-height: 16px;
			margin-bottom: 20rpx;
		}
		.lableinfo{
			// margin: 0px 10px;
			font-size: 11px;
			font-weight: 400;
			color: #9BA7C1;
			line-height: 12px;
			image{
				width: 20rpx;
				height: 20rpx;
				padding-right: 5px;
				vertical-align: middle;
			}
		}
		.upload-image{
			width: 100%;
			height: 100%;
			// border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #F3F4F7;
			image{
				width: 60rpx;
				height: 52rpx;
				margin-bottom: 14rpx;
			}
			text{
				font-size: 22rpx;
				color: #9BA7C1;
			}
		}
	}
	.submit{
		button: 0;
		padding: 15px;
		box-shadow: 0 16rpx 40rpx 0rpx rgba(55,58,64,0.14);
		button{
			box-shadow: 0 18rpx 30rpx 2rpx rgba(199, 23, 30, 0.24);
		}
	}
</style>
